<template>
  <div>
    <h3>工作日历</h3>
    <div class="select">
      <el-select v-model="year" @change="change" placeholder="请选择">
        <el-option
          v-for="item in newArr"
          :key="item"
          :value="item"
          :label="item"
        >
        </el-option>
      </el-select>
      <el-select v-model="month" placeholder="请选择">
        <el-option v-for="item in 12" :key="item" :value="item" :label="item">
        </el-option>
      </el-select>
    </div>
    <el-calendar v-model="nowDate">
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date }">
        <span class="day">{{ date | mydate }} </span>
        <span v-if="isWeek(date)" class="xiu">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    localDate: {
      type: Date,
      default: function () {
        return new Date()
      }
    }
  },
  data () {
    return {
      year: '',
      month: '',
      newArr: [],
      nowDate: ''
    }
  },
  methods: {
    getFullYear () {
      const min = this.year - 5
      const max = this.year + 5

      for (let i = min; i <= max; i++) {
        this.newArr.push(i)
      }
    },
    isWeek (date) {
      // console.log(date);
      // 将 date 转为日期
      const _time = new Date(date)
      // 得到日期的年
      const _year = _time.getFullYear()
      // 得到日期的月
      const _month = _time.getMonth() + 1
      // 再得到 date 是一周中的第几天
      const day = _time.getDay() // 日 => 0 一：1 二：2：三：3... 六：6
      // 判断日期必须是当月
      if (this.year === _year && this.month === _month) {
        // 判断天数，如果是周期，返回 true
        if (day === 0 || day === 6) {
          return true
        }
      }
    },
    change () {
      const _time = new Date()
      // 得到日期的年
      const _year = _time.getFullYear()
      // 得到日期的月
      const _month = _time.getMonth() + 1

      if (this.year === _year && this.month === _month) {
        this.nowDate = _time
      } else {
        this.nowDate = new Date(`${this.year}/${this.month}/01`)
      }
    }
  },
  watch: {
    localDate: {
      handler: function (newV) {
        // console.log(newV);
        const mydate = new Date(newV)

        this.nowDate = mydate

        this.year = mydate.getFullYear()

        this.month = mydate.getMonth() + 1

        this.getFullYear()
      },
      immediate: true,
      deep: true
    }
  },
  filters: {
    mydate (value) {
      return new Date(value).getDate()
    }
  }
}
</script>

<style lang="scss">
h3 {
  border-bottom: 1px solid #ccc;
  line-height: 50px;
}

.el-calendar__header {
  display: none;
}

.select {
  margin: 30px 0 10px;
  text-align: right;

  .el-input {
    width: 100px;
    margin-right: 10px;
  }
}

.el-calendar-table thead th:nth-child(n + 6) {
  color: #fb8c62 !important;
  font-weight: 700;
}

.el-calendar-table td {
  border: none !important;
  // table-layout: fixed;
  // display: inline-block;
  width: 30px !important;
}

.el-calendar-table .el-calendar-day {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
.xiu {
  width: 20px;
  height: 20px;
  background-color: #fa7c4d;
  border-radius: 50%;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  margin-left: 10px;
}

.is-today {
  .day {
    background-color: #409eff;
    color: #fff;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 12px;
  }
}
</style>
